<template>
  <a-modal
    :title="data.id && '编辑临时安排'||'新增临时安排'"
    centered
    :visible="true"
    width="700"
    @cancel="dialogClosed"
  >

    <a-form
      :form="form"
    >
      <a-row style="width:700px">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="选择时段" class="label-width-auto" v-bind="formItemLayout">
            <a-range-picker
              v-decorator="[ 'selectedDate', {
                rules: [{ required: true, message: '请选择日期' }]
              }]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="是否上班" class="label-width-auto" v-bind="formItemLayout">
            <a-radio-group
              v-decorator="['restOrWork', {
                rules: [{ required: true, message: '请选择类型' }],
                initialValue: '上班'
              }]"
            >
              <a-radio-button value="上班">上班</a-radio-button>
              <a-radio-button value="休息">休息</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="restOrWork === '上班'">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="打卡时间" class="label-width-auto" v-bind="formItemLayout">
            <a-row>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-item label="上班" v-bind="formItemLayout">
                  <a-time-picker
                    v-decorator="[
                      `businessHoursStart`,
                      { rules: [{ required: true, message: '请输入上班时间' }] ,
                      },
                    ]"
                    format="HH:mm"
                    :allow-clear="false"
                    placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-item label="下班" v-bind="formItemLayout">
                  <a-time-picker
                    v-decorator="[
                      `businessHoursEnd`,
                      { rules: [{ required: true, message: '请输入下班时间'}],
                      },
                    ]"
                    format="HH:mm"
                    :allow-clear="false"
                    placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="适应部门" class="label-width-auto" v-bind="formItemLayout">
            <a-select
              v-decorator="[ 'departmentId', {
                rules: [{ required: true, message: '请选择一个部门' }],
                initialValue: -1
              }]"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in departmentList"
                :key="item.deptId"
                :value="item.deptId"
              >
                {{ item.deptName }}
              </a-select-option>

            </a-select>

          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="添加备注" class="label-width-auto" v-bind="formItemLayout">
            <a-textarea
              v-decorator="[
                'remark',
                {},
              ]"
              placeholder="请输入"
            />
          </a-form-item></a-col>
      </a-row>
    </a-form>
    <span slot="footer" class="dialog-footer">
      <a-button @click="dialogClosed()">取消</a-button>
      <a-button id="submit" :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</a-button>
    </span>
  </a-modal>
</template>
<style lang="less" scoped>
  .ant-form-item{
    margin-bottom: 5px;
  }
</style>

<script>
import { edit, get } from '@/pages/attendance/api/attendanceSpecialSchedule'
import formItem from '@/config/formItemLayout'
export default {
  name: 'AttendanceSpecialScheduleSave',
  props: {
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { onValuesChange: this.onValuesChange }),
      formItemLayout: formItem,
      dataForm: {
        id: null
      },
      departmentList: [],
      submitButton: {
        text: '提交',
        status: false
      },
      restOrWork: '上班'
    }
  },
  mounted () {
    this.$departmentListFunc().then(data => {
      this.departmentList = data
      this.departmentList.unshift({ deptId: -1, deptName: '所有部门' })
    })
    if (this.data.id) {
      this.$ajaxSend(get, this.data.id, {
        success: (data) => {
          if (data.restOrWork === '上班') {
            data.businessHoursStart = this.$moment(this.$moment().format('YYYY-MM-DD ') + (data.businessHoursStart || ''))
            data.businessHoursEnd = this.$moment(this.$moment().format('YYYY-MM-DD ') + (data.businessHoursEnd || ''))
          }
          data.selectedDate = [this.$moment(data.startTime || null), this.$moment(data.endTime || null)]
          this.dataForm = data
          this.$initForm(this.form, this.dataForm)
        }
      })
    }
  },
  methods: {
    dialogClosed () {
      this.$emit('dialogClosed')
    },
    // 表单提交
    dataFormSubmit () {
      this.$saveQuit('form', edit(this.data.id), (data) => {
        data.id = this.data.id || null
        data.startTime = data.selectedDate[0].format('YYYY-MM-DD') + ' 00:00:00'
        data.endTime = data.selectedDate[1].format('YYYY-MM-DD') + ' 23:59:59'
        if (data.restOrWork === '上班') {
          data.businessHoursStart = this.$moment(data.businessHoursStart).format('HH:mm')
          data.businessHoursEnd = this.$moment(data.businessHoursEnd).format('HH:mm')
        } else {
          data.businessHoursStart = '-'
          data.businessHoursEnd = '-'
        }
        return data
      })
    },
    onValuesChange (props, value) {
      console.log('value', value)
      if (value.restOrWork) {
        this.restOrWork = value.restOrWork
      }
    }
  }
}
</script>
